<style include="os-feedback-shared">
  :host {
    --cr-icon-button-margin-start: 20px;
    --cr-section-vertical-padding: 11px;
    --iron-icon-height: 40px;
  }

  cr-link-row {
    --cr-link-row-icon-width: 40px;
    border: 1px solid var(--cros-separator-color);
    border-radius: 4px;
    box-sizing: border-box;
    margin: 12px 0 0 0;
  }

  #buttonDone {
    display: flex;
    height: 32px;
    padding: 6px 16px;
    width: 63px;
  }

  #help-resources {
    display: flex;
    flex-direction: column;
  }

  #helpResourcesLabel {
    margin: 24px 0 12px 0;
  }

  .label {
    color: var(--cros-text-color-primary);
    font-family: var(--feedback-roboto-font-family);
    font-size: 14px;
    font-weight: var(--feedback-medium-font-weight);
    line-height: 20px;
  }

  .sub-label {
    color: var(--cros-text-color-secondary);
    font-family: var(--feedback-roboto-font-family);
    font-size: 13px;
    font-weight: var(--feedback-regular-font-weight);
    line-height: 20px;
  }

  #helpResourcesLabel {
    color: var(--cros-text-color-secondary);
    font-family: var(--feedback-google-sans-font-family);
    font-size: 15px;
    font-weight: var(--feedback-medium-font-weight);
    line-height: 22px;
    margin: 24px 0 0;
  }

  cr-link-row::part(icon) {
    --cr-icon-button-fill-color: var(--cros-icon-color-primary);
  }

  cr-link-row::part(icon):focus-visible {
    box-shadow: none;
    outline: 2px solid var(--cros-focus-ring-color);
  }

  .page-title:focus {
    outline: none;
  }
</style>
<div id="container">
  <div id="header">
    <h1 id="pageTitle" class="page-title" tabindex="-1">[[getTitle_(sendReportStatus)]]</h1>
  </div>
  <div id="shadowElevation"></div>
  <div id="content" on-scroll="onContainerScroll_">
    <div id="message" class="sub-label">[[getMessage_(sendReportStatus)]]</div>
    <div id="helpResources">
      <h2 id="helpResourcesLabel">[[i18n('helpResourcesLabel')]]</h2>
      <cr-link-row id="explore" start-icon="help-resources:explore"
          external using-slotted-label
          button-aria-description=""
          on-click="handleLinkClicked_">
          <span slot="label" class="label">[[i18n('exploreAppLabel')]]</span>
          <span slot="sub-label"
              class="sub-label">[[i18n('exploreAppDescription')]]
          </span>
      </cr-link-row>
      <cr-link-row id="diagnostics" start-icon="help-resources:diagnostics"
          external using-slotted-label
          button-aria-description=""
          on-click="handleLinkClicked_">
          <span slot="label" class="label">[[i18n('diagnosticsAppLabel')]]</span>
          <span slot="sub-label"
              class="sub-label">[[i18n('diagnosticsAppDescription')]]
          </span>
      </cr-link-row>
      <cr-link-row id="chromebookCommunity"
          start-icon="help-resources2:chromebook-community"
          hidden="[[isOffline_(sendReportStatus)]]" external using-slotted-label
          button-aria-description=""
          on-click="handleLinkClicked_">
          <span slot="label" class="label">[[i18n('askCommunityLabel')]]</span>
          <span slot="sub-label"
              class="sub-label">[[i18n('askCommunityDescription')]]
          </span>
      </cr-link-row>
    </div>
    <div id="shadowShield"></div>
  </div>
  <div id="separator"></div>
  <div id="navButtons">
    <cr-button id="buttonNewReport" class="cancel-button"
        on-click="handleBackButtonClicked_">
      <span>[[i18n('buttonNewReport')]]</span>
    </cr-button>
    <cr-button id="buttonDone" class="action-button"
      on-click="handleDoneButtonClicked_">[[i18n('buttonDone')]]</cr-button>
  </div>
</div>
